<template>
  <div class="app-container">
    <el-form :model="formInline" ref="queryRef" :inline="true">
        <el-form-item label="处理类型">
          <el-select v-model="formInline.chulileixing" placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="暂停名单" value="暂停名单"></el-option>
            <el-option label="失信名单" value="失信名单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理主体类型">
          <el-select v-model="formInline.zhutileixing" placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="供应商" value="供应商"></el-option>
            <el-option label="专家" value="专家"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="供应商/专家名称">
          <el-input v-model="formInline.name" placeholder="请输入您要查询的内容"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码/身份证号码">
          <el-input v-model="formInline.bianmar" placeholder="请输入您要查询的内容"></el-input>
        </el-form-item>
        <el-form-item label="组织形式">
          <el-select v-model="formInline.zuzhixingshi" placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="集中采购" value="集中采购"></el-option>
            <el-option label="自行采购" value="自行采购"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理日期">
          <el-col :span="11">
            <el-date-picker type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="请选择开始时间" v-model="formInline.startTime" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1" style="text-align:center">~</el-col>
          <el-col :span="11">
            <el-date-picker type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="请选择开始时间" v-model="formInline.endTime" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="success" size="small" @click="add()">添加</el-button>
    </div>
    <el-table
      :data="infoList"
      stripe
      border
      style="width: 100%; margin-top: 20px; margin-bottom: 20px"
    >
      <el-table-column type="index" label="序号" width="60">
        <template slot-scope="scope">
          <span>{{
            scope.$index + 1 + (formInline.pageNum - 1) * formInline.pageSize
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="供应商/专家名称"></el-table-column>
      <el-table-column prop="bianma" label="统一社会信用代码/身份证号码"></el-table-column>
      <el-table-column prop="shengxiaofanwei1" label="暂停生效范围（单位）"></el-table-column>
      <el-table-column prop="zantingshijian" label="处理日期"></el-table-column>
      <el-table-column prop="chulibumen" label="处理部门"></el-table-column>
      <el-table-column label="操作" width="260">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="del(scope.row)"
            >删除</el-button
          >
          <el-button type="success" size="mini" @click="look(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="handleChangeSize"
      @current-change="handleSizeChange"
      :current-page="1"
      :page-sizes="[16, 40, 100]"
      :page-size="16"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
     <!-- 添加或修改对话框 -->
     <el-dialog
      :title="title"
      :visible.sync="open"
      width="50%"
      @closed="closeDia"
      :z-index="1001"
    >
      <el-form ref="infoRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="处理类型">
          <el-select v-model="form.chulileixing" placeholder="请选择">
            <el-option label="暂停名单" value="暂停名单"></el-option>
            <el-option label="失信名单" value="失信名单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理编号">
          <el-input v-model="form.chulibianhao" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="处理主体类型">
          <el-select v-model="form.zhutileixing" placeholder="请选择">
            <el-option label="专家" value="专家"></el-option>
            <el-option label="供应商" value="供应商"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专家/供应商名称" prop="name" label-width="140px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号/供应商统一社会信用代码" label-width="240px" prop="bianma">
          <el-input v-model="form.bianma" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="供应商地址">
          <el-input v-model="form.dizhi" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="违规详情">
          <el-input v-model="form.weiguiqingxing" type="textarea" :rows="6" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="处理结果">
          <el-input v-model="form.chulijieguo" type="textarea" :rows="6" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生效范围（单位）" label-width="160px">
          <el-input v-model="form.shengxiaofanwei1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="生效范围（品种）" label-width="160px">
          <el-input v-model="form.shengxiaofanwei2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组织形式">
          <el-select v-model="form.zuzhixingshi" placeholder="请选择">
            <el-option label="集中采购" value="集中采购"></el-option>
            <el-option label="自行采购" value="自行采购"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理依据">
          <el-input v-model="form.chuliyiju" :rows="6" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="处理部门">
          <el-input v-model="form.chulibumen" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="处理日期">
          <el-date-picker type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="form.zantingshijian"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.char1" type="textarea" :rows="6" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 查看详情弹窗 -->
    <el-dialog
      title="处罚详情"
      :visible.sync="openList"
      width="50%"
      @closed="closeDia"
      :z-index="1001"
    >
      <el-descriptions class="margin-top" title="处罚详情" :column="1" :size="size" border>
        <el-descriptions-item label="供应商/专家名称" :label-style="{width: '220px'}" >
          {{detail.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">统一社会信用代码/身份证号码</template>{{detail.bianma}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">企业地址</template>{{detail.dizhi}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">违规详情</template>{{detail.weiguiqingxing}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处理结果</template>{{detail.chulijieguo}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">违规生效范围（单位）</template>{{detail.shengxiaofanwei1}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">违规生效范围（品种）</template>{{detail.shengxiaofanwei2}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">组织形式</template>{{detail.zuzhixingshi}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处理依据</template>{{detail.chuliyiju}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处理日期</template>{{detail.zantingshijian}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">处理部门</template>{{detail.chulibumen}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template> 
<script setup name="dishonesty">
import { getcaigouList, addcaigouList, getcaigouOne, editcaigouList, detcaigouOne } from "@/api/yxzx/dishonesty";
export default {
  components: {
  },
  data() {
    return {
      formInline:{
        chulileixing: '',
        zhutileixing: '',
        name: '',
        bianma: '',
        zuzhixingshi: '',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 16,
      },
      infoList: [],
      retotal: 0,
      pageindex: 1,
      pagesize: 6,
      reCount: 0,
      reCountpage: 0,
      newsList: [],
      open: false,
      total: 0,
      title: '',
      form: {},
      rules: {
        name: [
          { required: true, message: "请输入供应商/专家名称", trigger: "blur" },
        ],
        bianma: [
          { required: true, message: "请输入请选择统一社会信用代码/身份证号码", trigger: "blur" },
        ]
      },
      detail:{},
      openList: false,
    }
  },
  created() {
    this.getList();
  },
  methods: {
    // 搜索重置
    resetQuery(){
      this.formInline = {
        zhutileixing: '',
        name: '',
        bianma: '',
        zuzhixingshi: '',
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 16,
      }
      this.getList()
    },
    // 重置按钮
    handleQuery(){
      this.getList()
    },
    // 表单重置
    reset() {
      this.form = {
        zhutileixing: '',
        name: '',
        bianma: '',
        dizhi: '',
        weiguiqingxing: '',
        chulijieguo: '',
        shengxiaofanwei1: '',
        shengxiaofanwei2: '',
        zuzhixingshi: '',
        chuliyiju: '',
        zantingshijian: '',
        chulibumen: '',
      };
      this.resetForm("form");
    },
    handleSizeChange(val) {
      this.formInline.pageNum = val;
      this.getList()
    },
    handleChangeSize(val){
      this.formInline.pageSize = val;
      this.getList();
    },
    closeDia() {
      this.reset()
    },
    // 处罚详情
    look(row){
      this.detail = row
      this.openList = true
    },
    // 添加按钮
    add() {
      this.reset();
      this.open = true;
    },
    // 修改新闻
    edit(row) {
      getcaigouOne(row.id).then((response) => {
        this.open = true;
        this.form = response.data;
      });
    },
    // 删除新闻
    del(row) {
      detcaigouOne(row.id).then((response) => {
        this.$modal.msgSuccess("删除成功");
        this.getList();
      });
    },
    // 查询
    getList() {
      this.loading = true;
      getcaigouList(
        this.formInline.chulileixing,
        this.formInline.zhutileixing,
        this.formInline.name,
        this.formInline.bianma,
        this.formInline.zuzhixingshi,
        this.formInline.startTime,
        this.formInline.endTime,
        this.formInline.pageNum,
        this.formInline.pageSize,
      ).then((response) => {
        console.log(response)
        this.infoList = response.rows;
        this.total = response.total;
      });
    },
    submitForm() {
      this.$refs["infoRef"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            editcaigouList(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.reset()
            });
          } else {
            addcaigouList(this.form).then((response) => {
              this.$modal.msgSuccess("添加成功");
              this.open = false;
              this.getList();
              this.reset()
            });
          }
        }
      });
    },
    cancel() {
      this.open = false;
      this.reset()
    },
  }
  
} 
</script>  